<template>
  <div class="base-panel-toolbar common-toolbar" ref="toolbar">
    <o-tool-button
      v-show="!showBtns"
      type="dropdown"
      @on-click="handleToolDropClick"
      icon="wy-icon wy-Hamburg"
      placement="bottom-start"
      class="hamberg-btn"
    >
      <div slot="drop">
        <Dropdown placement="right-start">
          <DropdownItem>
            <span>
              {{ $srv.getI18nByPath('vxe.toolbar.turn') }}
            </span>
            <Icon type="ios-arrow-forward"> </Icon>
          </DropdownItem>
          <DropdownMenu slot="list">
            <DropdownItem
              name="firstRecord"
              :disabled="config.jumpFirst.isDisable"
            >
              <span>
                {{ $srv.getI18nByPath('vxe.toolbar.jumpLast') }}
              </span>
            </DropdownItem>
            <DropdownItem
              name="prevRecord"
              :disabled="config.previous.isDisable"
            >
              <span>
                {{ $srv.getI18nByPath('vxe.toolbar.previous') }}
              </span>
            </DropdownItem>
            <DropdownItem name="nextRecord" :disabled="config.next.isDisable">
              <span> {{ $srv.getI18nByPath('vxe.toolbar.next') }} </span>
            </DropdownItem>
            <DropdownItem
              name="lastRecord"
              :disabled="config.jumpLast.isDisable"
            >
              <span> {{ $srv.getI18nByPath('vxe.toolbar.jumpFirst') }} </span>
            </DropdownItem>
          </DropdownMenu>
        </Dropdown>
        <DropdownItem
          v-if="config.insert"
          name="insert_actived"
          :disabled="config.insert.isDisable || !config.insert.auth"
        >
          <Icon custom="wy-icon wy-insert" class="drop-icon" />
          <span> {{ $srv.getI18nByPath('vxe.toolbar.insert') }} </span>
        </DropdownItem>
        <Dropdown v-if="config.delete.isShow" placement="right-start">
          <DropdownItem
            :disabled="config.delete.isDisable || !config.delete.auth"
          >
            <Icon custom="wy-icon wy-huishouzhan1" class="drop-icon" />
            <span> {{ $srv.getI18nByPath('vxe.toolbar.remove') }} </span>
            <Icon type="ios-arrow-forward"> </Icon>
          </DropdownItem>
          <DropdownMenu slot="list">
            <DropdownItem
              name="remove"
              :disabled="config.delete.isDisable || !config.delete.auth"
            >
              <span> {{ $srv.getI18nByPath('vxe.toolbar.remove') }} </span>
            </DropdownItem>
            <DropdownItem
              name="delete"
              :disabled="config.delete.isDisable || !config.delete.auth"
            >
              <span>
                <!-- 直接删除 -->
                {{ $srv.getI18nByPath('vxe.menu.directRemove') }}
              </span>
            </DropdownItem>
          </DropdownMenu>
        </Dropdown>
        <DropdownItem
          v-if="config.edit.isShow"
          name="edit"
          :disabled="config.edit.isDisable || !config.edit.auth"
        >
          <Icon custom="wy-icon wy-bianji" class="drop-icon" />
          <span>
            <!-- {{ config.edit.value ? "取消修改" : "修改" }} -->
            {{
              config.edit.value
                ? $srv.getI18nByPath('BasePanelToolbar.cancelmodify')
                : $srv.getI18nByPath('BasePanelToolbar.modify')
            }}
          </span>
        </DropdownItem>
        <DropdownItem name="search">
          <Icon custom="wy-icon wy-sousuo13" class="drop-icon" />
          <span> {{ $srv.getI18nByPath('vxe.toolbar.search') }} </span>
        </DropdownItem>

        <DropdownItem
          v-if="config.save.isShow"
          name="save"
          :disabled="
            config.save.isDisable || (!config.insert.auth && !config.edit.auth)
          "
        >
          <Icon custom="wy-icon wy-baocun41" class="drop-icon" />
          <span> {{ $srv.getI18nByPath('vxe.toolbar.save') }} </span>
        </DropdownItem>
        <DropdownItem
          v-if="config.import.isShow"
          :disabled="!config.import.auth"
          name="open_import"
        >
          <Icon custom="wy-icon wy-daoru10" class="drop-icon" />
          <span> {{ $srv.getI18nByPath('vxe.toolbar.import') }} </span>
        </DropdownItem>
        <DropdownItem
          v-if="config.export.isShow"
          :disabled="!config.export.auth"
          name="open_export"
        >
          <Icon custom="wy-icon wy-daochu4" class="drop-icon" />
          <span> {{ $srv.getI18nByPath('vxe.toolbar.export') }} </span>
        </DropdownItem>
        <DropdownItem
          v-if="config.refresh.isShow && config.refresh.auth"
          :disabled="config.refresh.isDisable"
          name="reload"
        >
          <Icon custom="wy-icon wy-shuaxin13" class="drop-icon" />
          <span> {{ $srv.getI18nByPath('vxe.toolbar.refresh') }} </span>
        </DropdownItem>
        <!-- bancodeScan -->
        <DropdownItem
          v-if="config.print.isShow"
          :disabled="!config.print.auth"
          name="print"
        >
          <Icon custom="wy-icon wy-dayin" class="drop-icon" />
          <span> {{ $srv.getI18nByPath('vxe.toolbar.print') }} </span>
        </DropdownItem>

        <template v-if="config.addon">
          <template v-for="(item, idx) of config.addon">
            <Dropdown
              v-if="item.children.length > 0"
              :disabled="!item.auth"
              placement="right-start"
              :key="idx"
              v-show="item.isShow"
            >
              <DropdownItem>
                <Icon :custom="'wy-icon ' + item.icon" class="drop-icon" />
                <span> {{ $srv.getI18nBySrv(item.title) }} </span>
                <Icon type="ios-arrow-forward"> </Icon>
              </DropdownItem>
              <DropdownMenu slot="list">
                <DropdownItem :name="'custom-' + idx" :disabled="!item.auth">
                  <span> {{ $srv.getI18nBySrv(item.title) }} </span>
                </DropdownItem>
                <template v-for="(d, sidx) of item.children">
                  <DropdownItem
                    :name="'custom-' + idx + '-' + sidx"
                    :disabled="!d.auth"
                    :key="sidx"
                  >
                    <span> {{ d.title }} </span>
                  </DropdownItem>
                </template>
              </DropdownMenu>
            </Dropdown>
            <DropdownItem
              v-else
              :key="idx"
              :name="'custom-' + idx"
              :disabled="!item.auth"
              v-show="item.isShow"
            >
              <Icon :custom="'wy-icon ' + item.icon" class="drop-icon" />
              <span> {{ $srv.getI18nBySrv(item.title) }} </span>
            </DropdownItem>
          </template>
        </template>
      </div>
    </o-tool-button>
    <div class="panel-toolbar-left" ref="barLeft" v-show="showBtns">
      <o-tool-button
        v-if="config.insert.isShow"
        :disabled="config.insert.isDisable || !config.insert.auth"
        type="button"
        @on-click="$emit('commit-event', 'insert_actived')"
        icon="wy-icon wy-insert"
        :title="$srv.getI18nByPath('vxe.toolbar.insert')"
        :showtitle="showText"
      >
      </o-tool-button>
      <o-tool-button
        v-if="config.delete.isShow"
        color="error"
        :disabled="config.delete.isDisable || !config.delete.auth"
        type="button"
        @on-click="$emit('commit-event', 'remove')"
        icon="wy-icon wy-huishouzhan1"
        :title="$srv.getI18nByPath('vxe.toolbar.bill_remove')"
        :showtitle="showText"
      >
      </o-tool-button>
      <!-- save -->
      <o-tool-button
        v-if="config.save.isShow"
        :disabled="
          config.save.isDisable || (!config.insert.auth && !config.edit.auth)
        "
        type="button"
        @on-click="$emit('commit-event', 'save')"
        icon="wy-icon wy-baocun41"
        :title="$srv.getI18nByPath('vxe.toolbar.save')"
        :showtitle="showText"
      >
      </o-tool-button>

      <o-tool-button
        v-if="config.edit.isShow"
        :disabled="config.edit.isDisable || !config.edit.auth"
        type="switch"
        :showtitle="showText"
        v-model="config.edit.value"
        :switchlist="[
          {
            icon: 'wy-icon wy-bianji',
            value: false,
            title: $srv.getI18nByPath('vxe.toolbar.edit')
          },
          {
            icon: 'wy-icon wy-bianji',
            value: true,
            title: $srv.getI18nByPath('vxe.toolbar.cancelEdit')
          }
        ]"
        @on-click="$emit('commit-event', 'edit', $event)"
      >
      </o-tool-button>

      <!-- audit || unaudit -->
      <o-tool-button
        v-if="config.audit.isShow || config.unaudit.isShow"
        :disabled="
          config.audit.value
            ? config.audit.isDisable || !config.unaudit.auth
            : config.audit.isDisable || !config.audit.auth
        "
        type="switch"
        :showtitle="showText"
        :manually="true"
        v-model="config.audit.value"
        :switchlist="[
          {
            icon: 'wy-icon wy-shenhe',
            value: false,
            title: $srv.getI18nByPath('vxe.toolbar.audit')
          },
          {
            icon: 'wy-icon wy-fanshenhe1',
            value: true,
            title: $srv.getI18nByPath('vxe.toolbar.unaudit')
          }
        ]"
        @on-click="$emit('commit-event', 'check', $event)"
      >
      </o-tool-button>

      <!-- 送审 -->
      <!-- <o-tool-button
        v-if="config.requestAudit.isShow"
        :disabled="config.requestAudit.isDisable || !config.requestAudit.auth"
        type="button"
        @on-click="$emit('commit-event', 'requestAudit')"
        icon="wy-icon wy-gongyinglian"
        :title="$srv.getI18nByPath('vxe.toolbar.requestAudit')"
        :showtitle="showText"
      >
      </o-tool-button> -->

      <!-- 送审/反审核 -->
      <o-tool-button
        v-if="
          (config.requestAudit.isShow || config.antiAudit.isShow) &&
            config.requestAudit.auth &&
            config.antiAudit.auth
        "
        :disabled="
          config.requestAudit.value
            ? config.requestAudit.isDisable || !config.antiAudit.auth
            : config.requestAudit.isDisable || !config.requestAudit.auth
        "
        :showtitle="showText"
        type="switch"
        :manually="true"
        v-model="config.requestAudit.value"
        :switchlist="[
          {
            icon: 'wy-icon wy-gongyinglian',
            value: false,
            title: $srv.getI18nByPath('vxe.toolbar.requestAudit')
          },
          {
            icon: 'wy-icon wy-fanshenhe1',
            value: true,
            title: $srv.getI18nByPath('vxe.toolbar.antiAudit')
          }
        ]"
        @on-click="$emit('commit-event', 'requestAudit', $event)"
      ></o-tool-button>

      <!-- 审核状态 -->
      <o-tool-button
        v-if="config.auditStatus.isShow && config.auditStatus.auth"
        :disabled="config.auditStatus.isDisable || !config.auditStatus.auth"
        type="button"
        @on-click="$emit('commit-event', 'auditStatus')"
        icon="wy-icon wy-priority1"
        :title="$srv.getI18nByPath('vxe.toolbar.auditStatus')"
        :showtitle="showText"
      >
      </o-tool-button>

      <!-- 过账/取消过账 -->
      <o-tool-button
        v-if="
          (config.accountPosted.isShow || config.cancelPost.isShow) &&
            config.accountPosted.auth &&
            config.cancelPost.auth
        "
        :disabled="
          config.accountPosted.value
            ? config.accountPosted.isDisable || !config.cancelPost.auth
            : config.accountPosted.isDisable || !config.accountPosted.auth
        "
        :showtitle="showText"
        type="switch"
        :manually="true"
        v-model="config.accountPosted.value"
        :switchlist="[
          {
            icon: 'wy-icon wy-guozhang',
            value: false,
            title: $srv.getI18nByPath('vxe.toolbar.accountPosted')
          },
          {
            icon: 'wy-icon wy-fanguozhang',
            value: true,
            title: $srv.getI18nByPath('vxe.toolbar.cancelPost')
          }
        ]"
        @on-click="$emit('commit-event', 'accountPost', $event)"
      ></o-tool-button>

      <!-- 结案/反结案 -->
      <o-tool-button
        v-if="
          (config.caseclosed.isShow || config.anticlosing.isShow) &&
            config.caseclosed.auth &&
            config.anticlosing.auth
        "
        :disabled="
          config.caseclosed.value
            ? config.caseclosed.isDisable || !config.anticlosing.auth
            : config.caseclosed.isDisable || !config.caseclosed.auth
        "
        :showtitle="showText"
        type="switch"
        :manually="true"
        v-model="config.caseclosed.value"
        :switchlist="[
          {
            icon: 'wy-icon wy-jiean',
            value: false,
            title: $srv.getI18nByPath('vxe.toolbar.caseclosed')
          },
          {
            icon: 'wy-icon wy-fanjiean',
            value: true,
            title: $srv.getI18nByPath('vxe.toolbar.anticlosing')
          }
        ]"
        @on-click="$emit('commit-event', 'caseclose', $event)"
      ></o-tool-button>

      <!-- 冻结/解除冻结 -->
      <o-tool-button
        v-if="
          (config.freeze.isShow || config.unfreeze.isShow) &&
            config.freeze.auth &&
            config.unfreeze.auth
        "
        :disabled="
          config.freeze.value
            ? config.freeze.isDisable || !config.unfreeze.auth
            : config.freeze.isDisable || !config.freeze.auth
        "
        :showtitle="showText"
        type="switch"
        :manually="true"
        v-model="config.freeze.value"
        :switchlist="[
          {
            icon: 'wy-icon wy-dongjie',
            value: false,
            title: $srv.getI18nByPath('vxe.toolbar.freeze')
          },
          {
            icon: 'wy-icon wy-jiechudongjie',
            value: true,
            title: $srv.getI18nByPath('vxe.toolbar.unfreeze')
          }
        ]"
        @on-click="$emit('commit-event', 'freeze', $event)"
      ></o-tool-button>

      <!-- 作废 -->
      <o-tool-button
        v-if="config.void.isShow && config.void.auth"
        :disabled="config.void.isDisable || !config.void.auth"
        type="button"
        @on-click="$emit('commit-event', 'void')"
        icon="wy-icon wy-zuofei1"
        :title="$srv.getI18nByPath('vxe.toolbar.void')"
        :showtitle="showText"
      >
      </o-tool-button>

      <o-tool-button
        v-if="config.queryLink"
        type="dropdown"
        :select="true"
        :showtitle="showText"
        icon="wy-icon wy-liancharukudan"
        :title="$srv.getI18nByPath('vxe.toolbar.queryLink')"
        @on-click="$emit('commit-event', 'queryLink', $event)"
      >
        <div slot="drop">
          <DropdownItem
            v-for="(item, idx) of config.queryLink"
            :name="idx"
            :key="idx"
          >
            {{ $srv.getI18nBySrv(item.title) }}
          </DropdownItem>
        </div>
      </o-tool-button>

      <o-tool-button
        v-if="config.selbill"
        type="dropdown"
        :select="true"
        :showtitle="showText"
        icon="wy-icon wy-hexiaodaiban"
        :title="$srv.getI18nByPath('vxe.toolbar.selbill')"
        :disabled="config.selbill.isDisable"
        @on-click="$emit('commit-event', 'selbill', $event)"
      >
        <div slot="drop">
          <DropdownItem
            v-for="(item, idx) of config.selbill"
            :name="idx"
            :key="idx"
            :disabled="!item.auth || config.selbill.isDisable"
          >
            {{ $srv.getI18nBySrv(item.id) }}
          </DropdownItem>
        </div>
      </o-tool-button>

      <div v-if="config.addon" class="custom-btn-section">
        <div
          v-for="(item, idx) of config.addon"
          :key="idx"
          class="custom-btn-inner"
        >
          <o-tool-button
            v-if="item.children.length > 0"
            type="dropdown"
            :select="true"
            @on-click="doCustomBtnAction(idx, $event)"
            :icon="'wy-icon ' + item.icon"
            :disabled="!item.auth"
            :title="$srv.getI18nBySrv(item.title)"
            :showtitle="showText"
            v-show="item.isShow"
          >
            <div slot="drop">
              <template v-for="(d, sidx) of item.children">
                <DropdownItem :key="sidx" :disabled="!d.auth" :name="sidx">
                  {{ $srv.getI18nBySrv(d.title) }}
                </DropdownItem>
              </template>
            </div>
          </o-tool-button>
          <o-tool-button
            v-else
            type="button"
            @on-click="doCustomBtnAction(idx)"
            :disabled="!item.auth"
            :icon="'wy-icon ' + item.icon"
            :title="$srv.getI18nBySrv(item.title)"
            :showtitle="showText"
            v-show="item.isShow"
          >
          </o-tool-button>
        </div>
      </div>
    </div>
    <div class="panel-toolbar-right" ref="barRight" v-show="showBtns">
      <o-tool-button
        type="button"
        @on-click="$emit('commit-event', 'search')"
        icon="wy-icon wy-sousuo13"
        :title="$srv.getI18nByPath('vxe.toolbar.search')"
        :showtitle="showText"
      >
      </o-tool-button>

      <!-- 条码扫描 -->
      <o-tool-button
        v-if="config.bancodeScan.isShow"
        type="button"
        @on-click="$emit('commit-event', 'bancodeScan')"
        icon="wy-icon wy-saoma"
        :title="$srv.getI18nByPath('vxe.toolbar.bancodeScan')"
        :showtitle="showText"
      >
      </o-tool-button>

      <!-- import export refresh -->
      <o-tool-button
        v-if="config.refresh.isShow && config.refresh.auth"
        type="button"
        @on-click="$emit('commit-event', 'reload')"
        icon="wy-icon wy-shuaxin13"
        :disabled="config.refresh.isDisable"
        :title="$srv.getI18nByPath('vxe.toolbar.refresh')"
        :showtitle="showText"
      >
      </o-tool-button>

      <!-- attach-附件 -->
      <!-- <o-tool-button
        type="button"
        @on-click="$emit('commit-event', 'attach')"
        icon="wy-icon wy-fujian"
        :title="$srv.getI18nByPath('vxe.menu.attach')"
        :showtitle="showText"
      >
      </o-tool-button> -->

      <!-- <o-tool-button
        v-if="config.import.isShow"
        :disabled="config.import.isDisable || !config.import.auth"
        type="button"
        @on-click="$emit('commit-event', 'open_import')"
        icon="wy-icon wy-daoru10"
        :title="$srv.getI18nByPath('vxe.toolbar.import')"
        :showtitle="showText"
      >
      </o-tool-button>
      <o-tool-button
        v-if="config.export.isShow"
        :disabled="!config.export.auth"
        type="button"
        @on-click="$emit('commit-event', 'open_export')"
        icon="wy-icon wy-daochu4"
        :title="$srv.getI18nByPath('vxe.toolbar.export')"
        :showtitle="showText"
      >
      </o-tool-button>-->
      <o-tool-button
        v-if="config.print.isShow"
        :disabled="!config.print.auth"
        type="button"
        @on-click="$emit('commit-event', 'print')"
        icon="wy-icon wy-dayin"
        :title="$srv.getI18nByPath('vxe.toolbar.print')"
        :showtitle="showText"
      >
      </o-tool-button>
      <div class="controls">
        <Button
          v-if="config.jumpFirst.isShow"
          type="text"
          class="control"
          @click="$emit('commit-event', 'firstRecord')"
          :disabled="config.jumpFirst.isDisable"
        >
          <Icon custom="wy-icon wy--previous" />
        </Button>
        <Button
          v-if="config.previous.isShow"
          type="text"
          class="control"
          @click="$emit('commit-event', 'prevRecord')"
          :disabled="config.previous.isDisable"
        >
          <Icon custom="wy-icon wy-previous" />
        </Button>
        <Button
          v-if="config.next.isShow"
          type="text"
          class="control"
          @click="$emit('commit-event', 'nextRecord')"
          :disabled="config.next.isDisable"
        >
          <Icon custom="wy-icon wy-next" />
        </Button>
        <Button
          v-if="config.jumpLast.isShow"
          class="control"
          type="text"
          @click="$emit('commit-event', 'lastRecord')"
          :disabled="config.jumpLast.isDisable"
        >
          <Icon custom="wy-icon wy-next1" />
        </Button>
      </div>
      <div class="pages">
        <i-input
          :value="current"
          @on-enter="$emit('commit-event', 'jumpToPage', $event)"
        >
        </i-input
        >/<span> {{ total }} </span>
      </div>

      <!-- <o-tool-button
        type="dropdown"
        icon="wy-icon wy-guanli"
        :showtitle="false"
        @on-click="$emit('commit-event', $event)"
      >
        <div slot="drop"> -->
      <!-- <DropdownItem
            v-if="config.print.isShow"
            v-show="config.print.auth"
            name="print"
            ><Icon custom="wy-icon wy-dayin" class="drop-icon" /><span>{{
              $srv.getI18nByPath("vxe.toolbar.print")
            }}</span></DropdownItem
          > -->
      <!-- <DropdownItem
            v-if="config.import.isShow"
            v-show="config.import.auth"
            name="open_import"
            ><Icon custom="wy-icon wy-daoru10" class="drop-icon" /><span>{{
              $srv.getI18nByPath("vxe.toolbar.import")
            }}</span></DropdownItem
          >
          <DropdownItem
            v-if="config.export.isShow"
            v-show="config.export.auth"
            name="open_export"
            ><Icon custom="wy-icon wy-daochu4" class="drop-icon" /><span>{{
              $srv.getI18nByPath("vxe.toolbar.export")
            }}</span></DropdownItem
          > -->
      <!-- </div>
      </o-tool-button> -->
    </div>

    <o-tool-button
      type="switch"
      ref="expandBtn"
      :switchlist="[
        { icon: 'wy-icon wy-ios-expand', value: false },
        { icon: 'wy-icon wy-ios-contract', value: true }
      ]"
      @on-click="$emit('commit-event', 'expand', $event)"
      class="expand-btn"
    ></o-tool-button>
  </div>
</template>
<script lang="ts">
import { Tsrv, vue, T_srv, ifs, I_command } from './config';

@T_srv.comp
export default class BasePanelToolbar extends vue {
  /**
   * props
   */
  @T_srv.prop({
    required: true,
    default: () => {
      return {};
    }
  })
  config!: any;

  @T_srv.prop({
    required: true,
    default: 0
  })
  current!: number;

  @T_srv.prop({
    required: true,
    default: 0
  })
  total!: number;

  private showText: boolean = true;

  private showBtns: boolean = true;

  private fullLeft: number = 0;

  private fullRight: number = 0;

  private miniLeft: number = 0;

  private miniRight: number = 0;

  private toolbar: HTMLElement | null = null;

  private left: HTMLElement | null = null;

  private right: HTMLElement | null = null;

  private expand: HTMLElement | null = null;

  private isFirst = true;

  /* 父组件compBoxInfo */
  @T_srv.prop({
    required: false,
    type: Object,
    default: null
  })
  compBoxInfo: ifs.I_compBoxInfo;

  /* 组件名 */
  private G_compName: string = 'oToolbar';

  /* 组件箱信息对象 */
  private GT_compBoxInfo: ifs.I_compBoxInfo;

  /* 组件箱对象 */
  private GT_compBox: ifs.I_compBox;

  /* 组件箱识别ID */
  private G_compID: string;

  private GT_command: I_command;

  mounted() {
    this.G_compName = this.G_compName;
    this.$emit('compBoxInfo', this.GT_compBoxInfo);
    this.GT_compBox.addCompMergeName(this.G_compID, this.G_compName, this);
    setTimeout(() => {
      // this.$nextTick(() => {
      const erd = this.$elementDetecter();
      this.toolbar = this.$refs.toolbar as HTMLElement;
      this.left = this.$refs.barLeft as HTMLElement;
      this.right = this.$refs.barRight as HTMLElement;
      this.fullLeft = this.getWidth(this.left);
      this.fullRight = this.getWidth(this.right);
      this.miniLeft = 0;
      this.miniRight = 0;
      this.expand = (this.$refs.expandBtn as any).$el as HTMLElement;
      this.reframe(this.toolbar);
      erd.listenTo(this.toolbar, (el: any) => {
        this.reframe(el);
      });
      // });
    }, 0);
  }

  created() {
    // 如果父组件没有传参，那就产生一个
    this.GT_compBoxInfo = Tsrv.getCompInfo(this.compBoxInfo);
    this.G_compID = this.GT_compBoxInfo.compID;
    this.GT_compBox = this.GT_compBoxInfo.TcompBox;
    this.GT_command = this.GT_compBox.getCompMergeName(
      this.G_compID,
      'oBasePanelCMD'
    );
  }

  destroyed() {
    /* 注册组件销毁 */
    this.GT_compBox.removeCompMergeName(this.G_compID, this.G_compName);

    /* 最终应用组件销毁 */
    /* this.GT_compBox.removeCompMergeName(this.G_compID, this.G_compName,'funName'); */

    /* 如果父组件传入的compBoxInfo则删除本文件产生的引用,反之是本组件产生的ID统一删除 */
    if (Tsrv.utils.isEmpty(this.compBoxInfo)) {
      this.GT_compBox.removeCompsWithCompID(this.G_compID);
    } else {
      this.GT_compBox.removeCompsMergeName(this.G_compID, [
        `'${this.G_compName}'`
      ]);
    }

    /* 如果是动态组件可能会关闭全局compBox */
    // this.GT_compBox = null
  }

  private reframe(el: any) {
    const that = this;

    this.retrieveHtmlInfo();
    if (
      el.offsetWidth >
      that.fullLeft + that.fullRight + this.expand.offsetWidth + 30
    ) {
      that.showText = true;
      that.showBtns = true;
      that.isFirst = true;
    } else {
      that.showText = false;
      if (that.isFirst) {
        that.isFirst = false;
        that.$nextTick(() => {
          this.retrieveHtmlInfo();
        });
      }
      setTimeout(() => {
        if (this.miniLeft === 0 && this.miniRight === 0) {
          this.retrieveHtmlInfo();
        }
        that.showBtns =
          el.offsetWidth >
          this.miniLeft + this.miniRight + this.expand.offsetWidth + 30;
      }, 100);
    }
  }

  private retrieveHtmlInfo() {
    const that = this;
    that.left = that.$refs.barLeft as HTMLElement;
    that.right = that.$refs.barRight as HTMLElement;
    if (that.showText) {
      that.fullLeft = that.getWidth(that.left);
      that.fullRight = that.getWidth(that.right);
    } else {
      that.miniLeft = that.getWidth(that.left);
      that.miniRight = that.getWidth(that.right);
    }
  }

  private doCustomBtnAction(index, subIndex = null) {
    if (subIndex !== null) {
      this.$emit(
        'commit-event',
        'customBtnAction',
        this.config.addon[index].children[subIndex]
      );
    } else {
      this.$emit('commit-event', 'customBtnAction', this.config.addon[index]);
    }
  }

  public handleToolDropClick(name: string) {
    if (name) {
      if (name.indexOf('-') > -1) {
        const arr = name.split('-');
        if (arr.length === 2) {
          this.doCustomBtnAction(Tsrv.utils.toNumber(arr[1]));
        } else {
          this.doCustomBtnAction(
            Tsrv.utils.toNumber(arr[1]),
            Tsrv.utils.toNumber(arr[2])
          );
        }
      } else if (name === 'edit') {
        this.config.edit.value = !this.config.edit.value;
        this.$emit('commit-event', name, this.config.edit.value);
      } else {
        this.$emit('commit-event', name);
      }
    }
  }

  public getWidth(el: any) {
    return Tsrv.utils.sum(el.children, (e: any) => e.offsetWidth);
  }
}
</script>
<style scoped lang="scss">
.base-panel-toolbar ::v-deep {
  .custom-btn-section {
    float: right;
    .custom-btn-inner {
      float: left;
    }
  }
  .drop-icon {
    margin-right: 8px;
  }
  .panel-toolbar-right {
    position: absolute;
    right: 42px;
    top: 0;
    height: 100%;
    .grid-search {
      margin: 0 10px;
      input {
        border-radius: 15px;
        background-color: #f8f8f8;
        border: 1px solid #f5f5f5;
        padding: 0 12px;
      }
      .ivu-icon {
        margin-right: 8px;
      }
    }
    .controls {
      margin: 4px 8px;
      float: left;
      .control {
        border-radius: 50%;
        padding: 0 10px;
        &:hover {
          background-color: var(--default-comp-hover-bgColor);
        }
        .ivu-icon {
          font-size: 12px;
        }
      }
    }
    .pages {
      margin: 9px 2px;
      line-height: 24px;
      float: left;
      .ivu-input-wrapper {
        float: left;
        width: 32px;
        margin-right: 6px;
        .ivu-input {
          height: 24px;
          text-align: center;
          border-radius: 5px;
        }
      }
      span {
        margin: 0 8px;
        font-size: 13px;
      }
    }
  }
  .panel-toolbar-left {
    position: absolute;
    left: 7px;
    top: 0;
    height: 100%;
  }
  .expand-btn {
    float: right;
    margin-right: 5px;
  }
  //icon
  .ivu-icon {
    font-size: var(--icon-size-medium);
    &.ivu-icon-ios-arrow-down {
      font-size: 12px;
      font-weight: normal;
    }
    &.ivu-icon-ios-search {
      font-size: 14px;
      font-weight: normal;
    }
  }

  .o-toolbutton {
    .disabled {
      // $color: var(--basepanel-toolbar-btn-fontColor);
      // color: rgba($color, 0.1);
      background-color: transparent;
    }
    .titbtn {
      &:hover:not(.disabled) {
        color: var(--basepanel-toolbar-btn-hover-font-color);
        background-color: var(--basepanel-toolbar-btn-hover-bg-color);
      }
    }
  }
}
</style>
